var paletteElements =
[
   ['select','palette.fontfamily','combo',{},null]
  ,['select','palette.size','combo',{},null]
  ,['a','palette.plus','item',{},'+']
  ,['a','palette.minus','item',{},'-']
  ,['div','palette.fgcol','item',{color: 'black',backgroundColor: 'white'},'A']
  ,['div','palette.bgcol','item',{color: 'white',backgroundColor: 'black'},'A']
  ,['a','palette.bold','item',{fontWeight: 'bold'},'B']
  ,['a','palette.italic','item',{fontStyle: 'italic'},'I']
  ,['a','palette.underline','item',{textDecoration: 'underline'},'U']
  ,['a','palette.linethrough','item',{textDecoration: 'line-through'},'L']
  ,['a','palette.super','item',{},'A<span style="vertical-align: super;font-size:8px;">a</span>']
  ,['a','palette.sub','item',{},'A<span style="vertical-align: sub;font-size:8px;">a</span>']
];

var Palette = Class.create();
Palette.prototype = 
{
  initialize: function( cgd ) 
  {
    this.cGrid = cgd;
    this.elements = new Array();
    
    this.palette = Element.extend( document.createElement( 'div' ) );
    document.body.appendChild( this.palette ); 
    this.palette.id = 'palette';
    this.palette.className = 'frame';
    
    var title = Element.extend( document.createElement( 'div' ) );
    this.palette.appendChild( title );
    title.className = 'title';
    title.innerHTML = 'WcmE'
        
    for( var i = 0; i < paletteElements.length; i++ )
    {
      var e = this.elements[i] = Element.extend( document.createElement( paletteElements[i][0] ) );
      this.palette.appendChild( e ); 
      e.id = paletteElements[i][1];
      e.className = paletteElements[i][2]
      e.setStyle( paletteElements[i][3] );
      if( paletteElements[i][4] )
        e.innerHTML = paletteElements[i][4];
    }
      
    var opt = this.elements[0].options; 
    opt[0] = new Option(' ','',true); 
    opt[1] = new Option('Serif','serif',false);
    opt[2] = new Option('Sans-Serif','sans-serif',false);
    opt[3] = new Option('Cursive','cursive',false);
    opt[4] = new Option('Fantasy','fantasy',false);
    opt[5] = new Option('Monospace','monospace',false);
    opt[1].className = 'odd';
/*    
    <option class="odd" value="" selected="selected" label=" "> </option>
    <option class="even" value="serif" label="Serif">Serif</option>
    <option class="odd" value="sans-serif" label="Sans-Serif">Sans-Serif</option>
    <option class="even" value="cursive" label="Cursive">Cursive</option>
    <option class="odd" value="fantasy" label="Fantasy">Fantasy</option>
    <option class="even" value="monospace" label="Monospace">Monospace</option>
    
    Event.observe( this.elements[0], 'change', this.fontFamily.bindAsEventListener( this ), true );
    Event.observe( this.elements[1], 'change', this.fontSize.bindAsEventListener( this ), true );
    Event.observe( this.elements[4], 'mouseover', this.mouseOverFg.bindAsEventListener( this ), true );
    Event.observe( this.elements[5], 'mouseover', this.mouseOverBg.bindAsEventListener( this ), true );
*/
      var a = this.elements[6];
      a.href = "javascript:globalPalette.setStyleForSelection('fontWeight','bold','normal')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );
      
      a = this.elements[7];
      a.href = "javascript:globalPalette.setStyleForSelection('fontStyle','italic','normal')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = this.elements[8];
      a.href = "javascript:globalPalette.setStyleForSelection('textDecoration','underline','none')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = this.elements[9];
      a.href = "javascript:globalPalette.setStyleForSelection('textDecoration','line-through','none')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = this.elements[2];
      a.href = "javascript:globalPalette.setFontForSelection('fontSize',1)";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = this.elements[3];
      a.href = "javascript:globalPalette.setFontForSelection('fontSize',-1)";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );
      
      a = this.elements[10];
      a.href = "javascript:globalPalette.setStyleForSelection('verticalAlign','super','')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

    a = this.elements[11];
    a.href = "javascript:globalPalette.setStyleForSelection('verticalAlign','sub','')";
    a.onmouseover = function(){ return true; }
    Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

    this.palette.hide();
  },
  
  activate: function( ifrm )
  {
    this.cmeFrame = ifrm;

    var pos = Position.cumulativeOffset( ifrm.wrapper ); // ( position of the iframe element ) try wrapper;
//      var pos = Position.realOffset( ifrm.wrapper ); // ( position of the iframe element ) try wrapper;

    this.palette.style.left = pos[0] - 1 + "px"
    this.palette.style.top =  pos[1] - this.palette.getHeight() - 4 + "px"

    this.cGrid.setRangeForColoring( ifrm.range );
    this.palette.show();
  },
    
  deactivate: function()
  {
    this.cGrid.close();
    this.palette.hide();
  },
    
  reset: function()
  {
    this.cGrid.close();
//    var select = $('palette.fontfamily');
    this.elements[0].selectedIndex = 0;
//    select = $('palette.size');
    this.elements[0].selectedIndex = 0;
  },
    
  fontFamily: function( event )
  {
    var element = Event.element( event );
    this.setStyleForSelection( 'fontFamily', element.value )
  },
    
  fontSize: function( event )
  {
    var element = Event.element( event );
    this.setStyleForSelection( 'fontSize', element.value )
  },
    
  mouseOverFg: function( event )
  {
    this.cGrid.open( Event.element(event) );
    window.status = 'FG'
  },
   
  mouseOverBg: function( event )
  {
    this.cGrid.open( Event.element(event) );
    window.status = 'BG'
  },

  mouseOverAnchor: function( event )
  {
    this.cGrid.close();
    window.status = 'A'
    return true;
  },
    
  setStyleForSelection: function( style, value, toggle )  
  {
    try
    {
      var range = this.cmeFrame.range;
      range.activate();
      range.applyCSSToSelection( style, value, toggle ); 
    }
    catch(e)
    {
      alert( 'setStyleForSelection :: ' + e);
    }
  },
    
  setFontForSelection: function( style, value )  
  {
    try
    {
      var range = this.cmeFrame.range;
      range.activate();
      range.applyFontSizeToSelection( value );
    }
    catch(e)
    {
      alert( 'setFontForSelection :: ' + e);
    }
  }
}

function initPalette( colorGrid )
{
  return new Palette( colorGrid );
}